<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>控制执行</title>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1 class="display-4">控制执行！</h1>
        <p class="lead">检查回放脚本的必要条件，控制执行线程数，并开始执行。</p>
        <hr class="my-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">脚本确认</h5>
                <hr>
                <form class="was-validated">
                    <div class="form-row">
                        <div class="col-3 offset-2">
                            <div class="custom-control custom-checkbox mb-3">
                                <input type="checkbox" class="custom-control-input" id="firstScript" required>
                                <label class="custom-control-label" for="firstScript">One.java</label>
                            </div>
                        </div>
                        <a href="#" data-toggle="modal" data-target="#scriptDetailModal">详情</a>
                    </div>

                    <div class="form-row">
                        <div class="col-3 offset-2">
                            <div class="custom-control custom-checkbox mb-3">
                                <input type="checkbox" class="custom-control-input" id="secondScript" required>
                                <label class="custom-control-label" for="secondScript">Two.java</label>
                            </div>
                        </div>
                        <a href="#" data-toggle="modal" data-target="#scriptDetailModal">详情</a>
                    </div>

                    <div class="form-row">
                        <div class="col-3 offset-2">
                            <div class="custom-control custom-checkbox mb-3">
                                <input type="checkbox" class="custom-control-input" id="thirdScript" required>
                                <label class="custom-control-label" for="thirdScript">Three.java</label>
                            </div>
                        </div>
                        <a href="#" data-toggle="modal" data-target="#scriptDetailModal">详情</a>
                    </div>

                    <div class="form-group row">
                        <div class="col-5 offset-2">
                            <button type="submit" class="btn btn-success">确认</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <h5 class="card-title">数据确认</h5>
                <hr>
                <form>
                    <div class="form-group row">
                        <label for="dataName" class="col-2 col-form-label text-right">数据文件</label>
                        <div class="col-5">
                            <input type="text" readonly class="form-control-plaintext" id="dataName" value="data.txt">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="fieldName" class="col-2 col-form-label text-right">数据文件</label>
                        <div class="col-8" id="fieldName">
                            <div class="border rounded" style="padding: 1rem">
                                <button class="btn btn-outline-success" type="button">张三</button>
                                <button class="btn btn-outline-success" type="button">江苏省</button>
                                <button class="btn btn-outline-success" type="button">南京市</button>
                                <button class="btn btn-outline-success" type="button">苏州大学</button>
                                <button class="btn btn-outline-success" type="button">计算机科学与技术学院</button>
                                <button class="btn btn-outline-success" type="button">软件工程</button>
                                <button class="btn btn-outline-success" type="button">硕士研究生</button>
                                <button class="btn btn-outline-success" type="button">2015级</button>
                                <button class="btn btn-outline-success" type="button">20155227888@stu.suda.edu.cn</button>
                                <button class="btn btn-outline-success" type="button">18888888888</button>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col-5 offset-2">
                        <button class="btn btn-success">确认</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">开启线程</h5>
                <hr>
                <div class="form-group row">
                    <label for="threadCount" class="col-2 col-form-label text-right">线程数</label>
                    <div class="input-group col-5" id="threadCount">
                        <select class="custom-select">
                            <option selected>请选择线程数...</option>
                            <option value="1">1线程</option>
                            <option value="1">2线程</option>
                            <option value="1">3线程</option>
                            <option value="1">4线程</option>
                            <option value="1">5线程</option>
                            <option value="1">6线程</option>
                            <option value="1">7线程</option>
                            <option value="1">8线程</option>
                            <option value="1">9线程</option>
                            <option value="1">10线程</option>
                        </select>
                        <div class="input-group-append">
                            <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#editModal">开启线程</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="lead my-4"><a class="btn btn-danger" href="#" role="button" data-toggle="modal" data-target="#myLoginModal">确认执行</a></p>
    </div>
</div>

<!-- 脚本详情 Modal -->
<div class="modal fade" id="scriptDetailModal" tabindex="-1" role="dialog" aria-labelledby="scriptDetailModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="scriptDetailModalLabel">详情</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="card" style="margin-bottom: 1rem">
                    <div class="card-body">
                        <h5 class="card-title">脚本详情</h5>
                        <hr>
                        <div class="form-group row">
                            <label for="scriptName" class="col-3 col-form-label text-right">脚本名称</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="scriptName" value="名称">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="scriptField" class="col-3 col-form-label text-right">脚本字段</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="scriptField" value="字段">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="scriptContent" class="col-3 col-form-label text-right">脚本内容</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="scriptContent" value="字段">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="scriptDescription" class="col-3 col-form-label text-right">脚本描述</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="scriptDescription" value="字段">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="scriptTime" class="col-3 col-form-label text-right">上传时间</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="scriptTime"
                                       value="2018-01-30 19:43:19">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>